<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帖子列表</title>
</head>
<body>
<div id="app">
    <el-row>
        <el-link type="primary" :href="userURL">{{userName}}</el-link>
    </el-row>

    <table>
        <tr>
            <td>帖子标题</td>
            <td>帖子内容</td>
            <td>查看次数</td>
            <td>发布时间</td>
            <td>最后回复时间</td>
            <td>发贴用户</td>
        </tr>
        <tr v-for="post in posts">
            <td>
                <a :href="'http://localhost:8080/javaweb/app/getByPostsIdServlet?id='+post.id">{{post.title}}</a>
            </td>
            <td>{{post.content}}</td>
            <td>{{post.viewCount}}</td>
            <td>{{post.releaseTime}}</td>
            <td>{{post.lastTime}}</td>
            <td>{{post.lastTime}}</td>
        </tr>
    </table>
    <el-form ref="form" label-width="80px">
        <el-form-item label="帖子标题">
            <el-input v-model="fatie2.title"></el-input>
        </el-form-item>

        <el-form-item label="帖子内容">
            <el-input type="textarea" v-model="fatie2.content"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="fatie">立即发表</el-button>
        </el-form-item>
    </el-form>

</div>
</body>
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/dateFormat.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

<script>

    new Vue({
        el: "#app",
        data: {
            posts: {
                id: "",
                title: "",
                content: "",
                viewCount: "",
                releaseTime: "",
                lastTime: "",
                userId: "",
            },
            userEntity: {
                userName: ""
            },
            userURL: "",
            fatie2: {
                title: "",
                content: ""
            },
            userName: ""
        },
        mounted() {
            this.postsList();
            this.postUser();
        },
        methods: {
            postUser(){
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/javaweb/app/postsUser"
                }).then(function (response){
                    _this.userName = response.data.userName
                })
            },
            postsList() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/javaweb/app/posts"
                }).then(function (response) {
                    _this.posts = response.data
                    _this.userURL = "http://localhost:8080/javaweb/app/"
                })
            },
            fatie() {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/javaweb/app/fatie",
                    data: _this.fatie2
                }).then(function (response) {
                    if (response.data.flag) {
                        alert(response.data.msg);
                        _this.postsList();
                    } else {
                        alert(response.data.msg);
                    }
                })
            }
        }
    })
</script>

</html>